<template>
  <div class="bodySty">
    <el-container class="loginBody content">
      <el-col :span="11">
        
        <div>
          <div class="titleSty">
          <span class="demonstration">校园一卡通</span>
        </div>
        <div><img :src="imgUrl" alt="" class="imgSty" /></div>
        </div>
        
      </el-col>

      <el-col :span="2"></el-col>
      <el-col :span="11" :gutter="1" class="content">
        <br>
        <el-container class="changeRole">
          <el-col :span="7"></el-col>                   
          <el-col :span="4" index="/login/userLogin">
            <router-link to="/login/userLogin" active-class="activeClass" :underline="false" @click="goTo()"><i class="el-icon-user el-icon--right" >学生</i></router-link>
          </el-col>|
          <el-col :span="5" index="/login/adminLogin">
            <router-link :underline="false" @click="goTo()" active-class="activeClass" to="/login/adminLogin"> <i class="el-icon-user-solid el-icon--right">管理员</i> </router-link>
          </el-col>
          <el-col :span="6"></el-col> 
        </el-container>

        <!-- 主体 -->
        <userLogin v-show="usershow"/>
        <!-- 路由出口 -->
        <router-view v-show="!usershow" name="loginv"></router-view>
        
      </el-col>
    </el-container>
  </div>
</template>

<script>
import userLogin from './userLogin.vue'
export default {
  name: "loginBody",
  components: { 
    userLogin,
  },
  data() {
    return {
      imgUrl: require("../../assets/login.png"),
      usershow:false,
    };
  },
  mounted() {
  },
  methods:{
    goTo() {
      this.usershow=false
      console.log(this.usershow)
    },
  }
};
</script>

<style>
.activeClass{
  color:rgb(64,158,255);
}

.content{
  border:1px solid rgb(192, 190, 190)
}

.bodySty {
  background-image: url("../../assets/back.png");
  background-repeat: no-repeat;
  background-size:100% 100%;
  background-color: rgba(124,204,241,0.9);
  margin: 0px;
  padding: 7%;
}

.loginBody {
  background-color: white;
  padding: 40px;
  text-align: center;
}

.demonstration {
  font-size: 1.8vw;
}

.changeRole{
  font-size: 1.2vw;
}

.messSty{
  padding:20px
}

.titleSty {
  padding-bottom: 5vh;
}

.imgSty {
  width: 100%;
  height: 100%;
}

.form-control {
  background: none;
  border: 1px solid #434a52;
  border-radius: 4;
  box-shadow: none;
  outline: none;
  color: inherit;
  width: 70%;
}

.router-link{
  text-decoration: none;
}
</style>